<template>
  <div class="login-container">
    <el-card :body-style="{ padding: '40px' }">
      <!-- logo图片 -->
      <div class="logo-container">
        <img class="logo" src="@/assets/images/logo.png" alt="logo" />
      </div>
      <!-- 表单 -->
      <!--
          el-form整个表单容器，类似于原生的form标签
          model: form绑定的表单对象
          rules: 表单的校验规则
        -->
      <el-form ref="loginFormRef" :rules="rules" :model="loginForm">
        <!--
            el-form-item 表单的一行
            v-model: 双向绑定，收集输入框的值
            placeholder: 提示语
            prop: 校验的字段名称
          -->
        <el-form-item prop="mobile">
          <el-input v-model="loginForm.mobile" placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input v-model="loginForm.code" placeholder="验证码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox-group v-model="isAgree">
            <el-checkbox
              label="我已阅读并同意「用户协议」和「隐私条款」"
              name="type"
            ></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">登 录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// 目标：给表单添加数据校验的功能，防止用户为所欲为
// 1. 给el-form绑定 :rules属性及校验规则
// 2. 给el-form-item添加prop，指明校验的字段名称
// 3. 注意：rules规则属性名、prop、v-model绑定的字段名三个需要一致
import { loginAPI } from '@/api/Login'
import { setToken } from '@/utils/token'
export default {

  data () {
    return {
      // 是否勾选用户协议
      isAgree: false,
      // 登录表单对象
      loginForm: {
        mobile: '13522513531', // 随便写（用自己的）
        code: '246810' // 固定的
      },
      // 表单的校验规则
      rules: {
        mobile: [
          // 1. 不能为空
          // required: 必填
          // message: 出错的提示信息
          // trigger: 校验触发时机，默认是blur -> 失去焦点，change -> 值改变时
          { required: true, message: '手机号不能为空', trigger: 'change' },
          // 2. 必须是正确的手机号
          // pattern: 正则
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '请输入合法的手机号',
            trigger: 'change'
          }
        ],
        code: [
          // 1. 不能为空
          { required: true, message: '验证码不能为空', trigger: 'change' },
          // 2.必须是正确的手机号 // pattern: 正则
          {
            pattern: /^\d{6}$/,
            message: '请输入合法的验证码',
            trigger: 'change'
          }

          // 2. 必须是正确的验证码
        ]
      }
    }
  },
  methods: {
    onSubmit () {
      // console.log('submit!')
      if (!this.isAgree) {
        this.$message({ message: '登陆前,请同意协议', type: 'warning' })
        return
      }
      this.$refs.loginFormRef.validate(async (valid) => {
        // console.log(valid)
        if (!valid) return
        try {
          const resp = await loginAPI(this.loginForm)
          console.log(resp)
          this.$message({
            type: 'success',
            message: '登陆成功'
          })
          setToken(resp.data.data.token)
          this.$router.push('./')
        } catch (e) {
          this.$message({
            type: 'error',
            message: '手机号或验证码不对'

          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.login-container {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url(~@/assets/images/login.png);
  .el-card {
    width: 440px;
    height: 380px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
    .logo {
      width: 200px;
      display: block;
      margin: 0 auto 20px;
    }
    .el-button {
      width: 100%;
    }
  }
}
</style>
